import React,{ useState } from 'react';
import styles from './index.less';
import { Link } from 'umi';
import {
  Card,
  Tabs,
  Breadcrumb
} from 'antd';
import TabShow from './components/tabShow';

const { TabPane } = Tabs;

export default function Activity() {
  const [keys, setKeys] = useState(0)
  const tabLists = [
    { key: 0, tab: '全部' },
    { key: 2, tab: '进行中' },
    { key: 3, tab: '未开始' },
    { key: 6, tab: '已结束' },
    { key: 1, tab: '待审核' },
    { key: 4, tab: '已驳回' },
    { key: 7, tab: '草稿箱' },
  ];

  /** tabs 切换 key值 */
  const callback = (key) => {
    setKeys(key)
  };
  return (
    <div>
      {/** 面包屑导航 */}
      <div className={styles.bread}>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to="/createActivity">创建活动</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <h1>创建活动</h1>
      </div>
      {/** 卡片区域 */}
      <div className={styles.card}>
        <Card bordered={false}
            style={{ width: '100%' }}
        >
          <Tabs defaultActiveKey="0"
              onChange={callback}
          >
            {tabLists.map((item) => (
              <TabPane key={item.key}
                  tab={item.tab}
              >
              </TabPane>
            ))}
          </Tabs>
          {/** 搜索并展示的区域 */}
          <TabShow keys={keys}/>
        </Card>
      </div>
    </div>
  );
}
